<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .article-header {
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        .article-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #1a1a1a;
        }
        .article-meta {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
        }
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
        }
        .author-name {
            font-weight: 500;
            margin-right: 10px;
            color: #2d84ff;
        }
        .article-stats {
            display: flex;
            gap: 15px;
            font-size: 13px;
            color: #999;
        }
        .article-content {
            background: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
            margin-bottom: 30px;
        }
        .article-content img {
            max-width: 100%;
            border-radius: 4px;
            margin: 20px 0;
        }
        .action-bar {
            display: flex;
            justify-content: center;
            gap: 30px;
            padding: 15px 0;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            margin: 25px 0;
        }
        .action-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            transition: color 0.2s;
            background: none;
            border: none;
        }
        .action-btn:hover {
            color: #2d84ff;
        }
        .comments-section {
            background: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }
        .section-title {
            font-size: 18px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .comment {
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .comment:last-child {
            border-bottom: none;
        }
        .comment-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        .comment-author {
            font-weight: 500;
            color: #2d84ff;
            margin-right: 10px;
        }
        .comment-time {
            font-size: 12px;
            color: #999;
        }
        .comment-content {
            font-size: 14px;
            line-height: 1.7;
        }
        .comment-form {
            margin-top: 25px;
        }
        .comment-input {
            width: 100%;
            min-height: 80px;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 14px;
            resize: vertical;
            margin-bottom: 12px;
        }
        .submit-btn {
            background-color: #2d84ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }
        .submit-btn:hover {
            background-color: #1a75ff;
        }
        @media (max-width: 600px) {
            body {
                padding: 15px;
            }
            .article-title {
                font-size: 20px;
            }
            .article-stats {
                flex-wrap: wrap;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="article-header">
        <h1 class="article-title" id="article-title"></h1>
        <div class="article-meta">
            <img class="author-avatar" id="author-avatar" src="" alt="作者头像">
            <span class="author-name" id="author-name"></span>
            <span id="publish-date"></span>
        </div>
        <div class="article-stats">
            <span id="view-count"></span>
            <span id="like-count"></span>
            <span id="comment-count"></span>
        </div>
    </div>
    
    <div class="article-content" id="article-content"></div>
    
    <div class="action-bar">
        <button class="action-btn" id="like-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5 3C14.76 3 13.09 4 12 5.5C10.91 4 9.24 3 7.5 3C4.42 3 2 5.42 2 8.5C2 12.27 5.4 15.36 10.55 20.03L12 21.35L13.45 20.03C18.6 15.36 22 12.27 22 8.5C22 5.42 19.58 3 16.5 3Z" stroke="currentColor" stroke-width="2"/>
            </svg>
            <span>点赞</span>
        </button>
        <button class="action-btn" id="share-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z" stroke="currentColor" stroke-width="2"/>
                <path d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z" stroke="currentColor" stroke-width="2"/>
                <path d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z" stroke="currentColor" stroke-width="2"/>
                <path d="M8.59 13.51L15.42 17.49" stroke="currentColor" stroke-width="2"/>
                <path d="M15.41 6.51L8.59 10.49" stroke="currentColor" stroke-width="2"/>
            </svg>
            <span>分享</span>
        </button>
    </div>
    
    <div class="comments-section">
        <h2 class="section-title">评论 <span id="comments-count"></span></h2>
        <div id="comments-container"></div>
        
        <div class="comment-form">
            <textarea class="comment-input" placeholder="写下你的评论..."></textarea>
            <button class="submit-btn">发表评论</button>
        </div>
    </div>

    <script>
        // JSON数据源
        const articleData = {
            "id": 699,
            "title": "探索人工智能在医疗影像诊断中的创新应用",
            "author": {
                "name": "李明",
                "avatar": "https://randomuser.me/api/portraits/men/32.jpg"
            },
            "publishDate": "2025-08-05",
            "viewCount": 2485,
            "likeCount": 186,
            "commentCount": 24,
            "content": `
                <p>近年来，人工智能技术在医疗领域的应用取得了突破性进展，特别是在医学影像诊断方面。深度学习算法通过分析海量影像数据，能够辅助医生识别病灶，提高诊断准确率和效率。</p>
                
                <img src="https://images.unsplash.com/photo-1581595219311-5d0b3d0b3f0d?q=80&w=800" alt="AI医疗影像分析">
                
                <h3>技术原理与创新</h3>
                <p>当前最先进的医疗影像AI系统主要基于卷积神经网络（CNN）和Transformer架构。这些模型通过以下方式提升诊断能力：</p>
                <ul>
                    <li>病灶自动检测：在CT、MRI影像中精确定位肿瘤、出血点等异常区域</li>
                    <li>三维重建：将二维切片重建为三维器官模型，提供立体视角</li>
                    <li>量化分析：自动测量病灶尺寸、体积等关键参数</li>
                    <li>病程预测：基于历史数据预测疾病发展趋势</li>
                </ul>
                
                <h3>临床应用案例</h3>
                <p>在华山医院的试点项目中，AI辅助诊断系统使早期肺癌检出率提高了32%，假阴性率降低了28%。系统能在0.8秒内完成一张CT片的初步分析，标记出可疑区域供医生复核。</p>
                
                <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=800" alt="医疗AI操作界面">
                
                <h3>未来发展方向</h3>
                <p>下一代医疗影像AI将朝以下方向发展：多模态数据融合（结合影像、病历、基因数据）、可解释性AI（提供诊断依据说明）、联邦学习（保护患者隐私的分布式训练）。</p>
                <p>随着监管框架的完善和临床验证的深入，AI将成为放射科医生的标准辅助工具，但不会完全取代医生的专业判断，而是作为"第二双眼睛"提升整体医疗质量。</p>
            `,
            "comments": [
                {
                    "id": 1,
                    "user": "张医生",
                    "avatar": "https://randomuser.me/api/portraits/women/44.jpg",
                    "time": "1天前",
                    "content": "我们在实际临床中已经使用类似系统，确实显著提高了工作效率，特别是对于微小病灶的识别能力超过人类肉眼。"
                },
                {
                    "id": 2,
                    "user": "AI研究员",
                    "avatar": "https://randomuser.me/api/portraits/men/22.jpg",
                    "time": "2天前",
                    "content": "文章提到的联邦学习确实是重要方向，医疗数据隐私问题必须重视。我们团队正在开发的新型差分隐私方案能进一步降低数据泄露风险。"
                },
                {
                    "id": 3,
                    "user": "医疗设备从业者",
                    "avatar": "https://randomuser.me/api/portraits/women/68.jpg",
                    "time": "3天前",
                    "content": "请问目前国内哪些医院部署了成熟的AI影像系统？我们想进行实地考察学习。"
                }
            ]
        };

        // 页面渲染函数
        function renderPage() {
            // 渲染文章基本信息
            document.getElementById('article-title').textContent = articleData.title;
            document.getElementById('author-avatar').src = articleData.author.avatar;
            document.getElementById('author-name').textContent = articleData.author.name;
            document.getElementById('publish-date').textContent = `发表于 ${articleData.publishDate}`;
            document.getElementById('view-count').textContent = `${articleData.viewCount} 阅读`;
            document.getElementById('like-count').textContent = `${articleData.likeCount} 点赞`;
            document.getElementById('comment-count').textContent = `${articleData.commentCount} 评论`;
            
            // 渲染文章内容
            document.getElementById('article-content').innerHTML = articleData.content;
            
            // 渲染评论
            const commentsContainer = document.getElementById('comments-container');
            const commentsCount = document.getElementById('comments-count');
            commentsCount.textContent = `(${articleData.comments.length})`;
            
            articleData.comments.forEach(comment => {
                const commentElement = document.createElement('div');
                commentElement.className = 'comment';
                commentElement.innerHTML = `
                    <div class="comment-header">
                        <span class="comment-author">${comment.user}</span>
                        <span class="comment-time">${comment.time}</span>
                    </div>
                    <div class="comment-content">${comment.content}</div>
                `;
                commentsContainer.appendChild(commentElement);
            });
            
            // 添加互动按钮事件
            document.getElementById('like-btn').addEventListener('click', function() {
                articleData.likeCount++;
                this.querySelector('span').textContent = `已点赞 (${articleData.likeCount})`;
                this.style.color = '#ff4757';
            });
            
            document.getElementById('share-btn').addEventListener('click', function() {
                alert('已生成分享链接！\nhttps://api.xingse.net/article/share?id=699');
            });
            
            // 添加评论提交功能
            document.querySelector('.submit-btn').addEventListener('click', function() {
                const commentInput = document.querySelector('.comment-input');
                const content = commentInput.value.trim();
                
                if(content) {
                    // 创建新评论
                    const newComment = {
                        id: articleData.comments.length + 1,
                        user: '当前用户',
                        avatar: 'https://randomuser.me/api/portraits/lego/1.jpg',
                        time: '刚刚',
                        content: content
                    };
                    
                    // 添加到评论列表
                    articleData.comments.unshift(newComment);
                    
                    // 清空输入框
                    commentInput.value = '';
                    
                    // 重新渲染评论
                    commentsContainer.innerHTML = '';
                    articleData.comments.forEach(comment => {
                        const commentElement = document.createElement('div');
                        commentElement.className = 'comment';
                        commentElement.innerHTML = `
                            <div class="comment-header">
                                <span class="comment-author">${comment.user}</span>
                                <span class="comment-time">${comment.time}</span>
                            </div>
                            <div class="comment-content">${comment.content}</div>
                        `;
                        commentsContainer.appendChild(commentElement);
                    });
                    
                    // 更新评论计数
                    articleData.commentCount++;
                    document.getElementById('comment-count').textContent = `${articleData.commentCount} 评论`;
                    commentsCount.textContent = `(${articleData.comments.length})`;
                }
            });
        }

        // 页面加载完成后渲染
        document.addEventListener('DOMContentLoaded', renderPage);
    </script>
</body>
</html>
